<template>
  <el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" v-loading="isLoading"
    label-position="top">
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="所属项目">
          {{ isNullOrEmpty( operate.projectName ) }}
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.planName" prop="planName">
          <el-input :maxlength="30" :show-word-limit="true" v-model.trim="formInline.planName" clearable
            :placeholder="prompt?.planName" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.beginDate" prop="beginDate">
          <el-date-picker style="width: 100%" v-model.trim="formInline.beginDate" type="date"
            :placeholder="prompt?.beginDate" value-format="YYYY-MM-DD" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.endDate" prop="endDate">
          <el-date-picker style="width: 100%" v-model.trim="formInline.endDate" type="date"
            :placeholder="prompt?.endDate" value-format="YYYY-MM-DD" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.cycleValue" prop="cycleValue">
          <el-input v-model.trim="formInline.cycleValue" clearable type="number" :min="1"
            :placeholder="prompt?.cycleValue">
            <template #append>
                <el-select style="width: 100px" v-model="formInline.cycleUnit" class="sdk">
                  <el-option v-for="item in PERIODUNIT" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </template>
          </el-input>
        </el-form-item>
      </re-col>
      <!-- <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.cycleUnit" prop="cycleUnit">
          <el-select v-model="formInline.cycleUnit" placeholder="请选择">
            <el-option
              v-for="item in PERIODUNIT"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </re-col> -->
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.groupId" prop="groupId">
          <facilityGrouping v-model="formInline.groupId" multiple clearable placeholder="请选择" :style="{ width: '100%' }"
            @blur="formValidateField(ruleFormRef, 'groupId')" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item :label="titles?.inspectionUser" prop="inspectionUser">
          <authorizeuserproject :projectId="operate.checkedProject" v-model="formInline.inspectionUser" clearable
            multiple placeholder="请选择" :style="{ width: '100%' }"
            @blur="formValidateField(ruleFormRef, 'inspectionUser')" />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="完成后通知人" prop="groupId">
          <authorizeuserproject :projectId="operate.checkedProject" v-model="formInline.finishNotice" clearable multiple
            placeholder="请选择" :style="{ width: '100%' }" @blur="formValidateField(ruleFormRef, 'groupId')" />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="通知方式" prop="noticeType">
          <el-checkbox-group v-model="formInline.noticeType">
            <el-checkbox v-for="item in WORKORDER_NOTICE_TYPE" :key="item.value" :value="item.value">
              {{ isNullOrEmpty( item.label ) }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="通知时间" prop="noticeStart">
          <!-- <el-date-picker
            v-model="timelist"
            format="YYYY-MM-DD" value-format="YYYY-MM-DD"
            type="daterange"
            unlink-panels
            @change="changetime"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          /> -->

          <div class="flex items-center gap-[16px]">
            <el-time-select v-model="formInline.noticeStart" :max-time="formInline.noticeEnd" style="width: 140px"
              placeholder="示例: 00:00" start="00:00" step="00:10" end="24:00" />
            <el-time-select v-model="formInline.noticeEnd" style="width: 140px" :min-time="formInline.noticeStart"
              placeholder="请选择" start="00:00" step="00:10" end="24:00" />
            <span class="whitespace-nowrap text-[#ccc]">注意：只在该时间段内发送通知</span>
          </div>
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="未完成通知" prop="">
          <el-table :data="formInline.failNotice" border style="width: 100%" footer-row-class-name="hide">
            <el-table-column prop="day" label="距离巡检周期最后时间" minWidth="220" show-overflow-tooltip>
              <template v-slot="{ row }">
                <div class="flex items-center">
                  <el-input v-model.trim="row.day" type="number" :min="0" placeholder="" />
                  <div class="px-[5px]">天</div>
                  <el-input v-model.trim="row.hour" :min="0" type="number" placeholder="" />
                  <div class="px-[5px]">时</div>
                  <el-input v-model.trim="row.minute" :min="0" type="number" placeholder="" />
                  <div class="px-[5px]">分</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="noticeUser" label="通知人" show-overflow-tooltip minWidth="180">
              <template v-slot="{ row }">
                <authorizeuserproject v-model="row.noticeUser" clearable multiple placeholder="请选择"
                  :style="{ width: '100%' }" :projectId="operate.checkedProject" />
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" minWidth="60">
              <template v-slot="scope">
                <el-space>
                  <sj-link custom-type="sred" :underline="false" @click="deletes(scope)">删除</sj-link>
                </el-space>
              </template>
            </el-table-column>
          </el-table>
          <div class="footer-wrapper">
            <el-table :data="[100]" :show-header="false" :border="true" class="footer-table">
              <el-table-column label="">
                <template #default>
                  <div class="text-center cursor-pointer py-[10px]" @click="addsetup">
                    添加
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import authorizeuserproject from "@/components/select/authorizeuser/authorizeuserproject.vue";
import facilityGrouping from "@/components/select/facilityGrouping/facilityGrouping.vue";
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import { usePageVariablesStoreHook } from "@/store/modules/pageVariables";
import {
  WORKORDER_TYPE,
  WORKORDER_DISPATCH_TYPE
} from "@/constant/workorder-mangenment";
import {
  WORKORDER_NOTICE_TYPE
} from "@/constant/workorder-mangenment";
import { PERIODUNIT } from "@/constant/dayly-inspection";
import type { FormRules } from "element-plus";
import { titles, prompt } from "./index";
import type { infoType } from "@/api/operate/daily-inspection/Inspection-plan/index";
import { formValidateField } from '@/utils/functions'
type FormProps = {
  formInline: infoType;
  isLoading: boolean;
  names: string;
};
const operate = usePageVariablesStoreHook().getOperate();
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({}) as infoType,
  isLoading: false
});
const formRules = reactive(<FormRules>{
  id: [{ required: true, message: prompt?.id, trigger: "blur" }],
  projectName: [
    { required: true, message: prompt?.projectName, trigger: "blur" }
  ],
  planName: [{ required: true, message: prompt?.planName, trigger: "blur" }],
  beginDate: [{ required: true, message: prompt?.beginDate, trigger: "blur" }],
  endDate: [{ required: true, message: prompt?.endDate, trigger: "blur" }],
  cycleValue: [
    { required: true, message: prompt?.cycleValue, trigger: "blur" },
    { pattern: /^[1-9]\d*$/, message: "只能输入正整数", trigger: "change" }
  ],
  inspectionUser: [
    { required: true, message: prompt?.inspectionUser, trigger: "blur" }
  ],
  noticeStart: [
    { required: true, message: "请输入通知时间", trigger: "blur" }
  ],
  cycleUnit: [{ required: true, message: prompt?.cycleUnit, trigger: "blur" }],
  noticeStartTime: [
    { required: true, message: prompt?.groupId, trigger: "blur" }
  ],
  groupId: [{ required: true, message: prompt?.groupId, trigger: "blur" }],
  finishNotice: [{ required: true, message: prompt?.groupId, trigger: "blur" }]
});
const tableData = reactive({
  data: []
});
const timelist = ref([]);
const changetime = e => {
  if (e) {
    props.formInline.noticeStart = e[0];
    props.formInline.noticeEnd = e[1];
  }
};
const ruleFormRef = ref();
//添加步骤
const addsetup = () => {
  if (props.formInline.failNotice == null) {
    props.formInline.failNotice = []
  }
  props.formInline.failNotice.push({
    day: "",
    hour: "",
    minute: "",
    noticeUser: []
  });
};
//删除步骤
const deletes = ite => {
  props.formInline.failNotice.splice(ite.$index, 1);
};
function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
<style scoped lang="scss">
.hide {
  display: none;
}

/* 设置尾部添加的行的样式 */
.footer-wrapper {
  margin-top: -1px;
  /* 重叠原表格的分隔线 */
  width: 100%;

  ::v-deep(.el-table__cell) {
    padding: 0 !important;
  }
}

.footer-table .el-table__row {
  padding: 0 !important;
  background-color: #f2f2f2;
  /* 设置合计行的背景色 */
}
.sdk{
  ::v-deep(.el-input__validateIcon){
    display: none !important;
  }
}
</style>
